import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Row, Col, Button, Radio, Upload, Tabs, message } from 'antd';
import React, { useState, useEffect, useMemo } from 'react';
import styles from './index.less';
import { API_URL } from '@/config/api'
import { downFile } from '@/utils/downExcel';

import {
  Const
} from '../../Const';

class PrivateData {
  static imgType = new Map()
    .set(1, 'poSunImgListMap')
    .set(2, 'shaoShouImgListMap')
    .set(3, 'duoShouImgListMap')
    .set(6, 'neiWuQueShiImgListMap')
    .set(7, 'poSunImgListMap')
    .set(10, 'kuaiDiWuPinImgListMap');
  static showLostItemPicMap = new Map()
    .set(1, 'goodFileList')
    .set(2, 'touristFileList')
    .set(3, 'paperFileList')
    .set(4, 'luggageFileList');
  static imgObj = {};
  static isHaveData = false;
}

const ShowPic = props => {

  const { lostItemPicManageVisible, lostItemPic, form, onCancel, onSubmit: handleDelImgs, toUpload, ownerType, status } = props;

  // 图片大类
  const [picCategoryOptions, setPicCategoryOptions] = useState([]);
  // 展示图片
  const [showLostItemPic, handleShowLostItemPicture] = useState({
    goodFileList: [],
    touristFileList: [],
    paperFileList: [],
    luggageFileList: []
  });

  useEffect(() => {
    if (lostItemPicManageVisible) {
      let isHaveData = false;
      for (let key in lostItemPic) {
        if (lostItemPic[key] && lostItemPic[key].length !== 0) {
          isHaveData = true;
          break;
        }
      }
      PrivateData.isHaveData = isHaveData;
      handleShowLostItemPicture(lostItemPic);
      PrivateData.imgObj = Const[PrivateData.imgType.get(ownerType)];
      let _picCategoryOptions = [];
      for (let key in PrivateData.imgObj) {
        _picCategoryOptions.push({
          value: key,
          label: PrivateData.imgObj[key].text,
          showLostItem: PrivateData.showLostItemPicMap.get(+key)
        });
      }
      setPicCategoryOptions(_picCategoryOptions);
    } else {
      PrivateData.imgObj = {};
      PrivateData.isHaveData = false;
    }
  }, [lostItemPicManageVisible, lostItemPic]);

  const isDisabled = useMemo(() => {
    return (status === '0' || status === '2' || status === '待处理' || status === '处理中') ? false : true;
  }, [status]);

  // 下载图片
  const downloadImg = (url, twoType) => {
    let name = Const.twoTypeMap[twoType] || '';
    downFile(API_URL + `/api/uploadAndDownload/showImg?imgUrl=` + url, name);
  }

  // 删除图片
  const del = (oneType, index) => {
    Modal.confirm({
      title: '确认删除',
      content: '删除该图片',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        if (oneType === 1) {
          let goodFileListData = showLostItemPic.goodFileList.filter((item, goodIndex) => {
            return goodIndex !== index
          })
          handleShowLostItemPicture({ ...showLostItemPic, goodFileList: goodFileListData })
        } else if (oneType === 2) {
          let touristFileListData = showLostItemPic.touristFileList.filter((item, touristIndex) => {
            return touristIndex !== index
          })
          handleShowLostItemPicture({ ...showLostItemPic, touristFileList: touristFileListData })
        } else if (oneType === 3) {
          let paperFileListData = showLostItemPic.paperFileList.filter((item, paperIndex) => {
            return paperIndex !== index
          })
          handleShowLostItemPicture({ ...showLostItemPic, paperFileList: paperFileListData })
        } else {
          let luggageFileListData = showLostItemPic.luggageFileList.filter((item, paperIndex) => {
            return paperIndex !== index
          })
          handleShowLostItemPicture({ ...showLostItemPic, luggageFileList: luggageFileListData })
        }
      }
    });
  }

  // 确认
  const okHandle = () => {
    if (PrivateData.isHaveData) {
      handleDelImgs(showLostItemPic);
    } else {
      let isHaveData = false;
      for (let key in showLostItemPic) {
        if (showLostItemPic[key] && showLostItemPic[key].length !== 0) {
          isHaveData = true;
          break;
        }
      }
      if (isHaveData) {
        handleDelImgs(showLostItemPic);
      } else {
        message.warning('图片不能为空');
      }
    }
  };

  return (
    <Modal
      title={[
        <div key="title">图片管理</div>
      ]}
      className={styles.showPic}
      width="700px"
      visible={lostItemPicManageVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >

      <div>
        <Button type="primary" disabled={isDisabled} onClick={() => toUpload(showLostItemPic)}>上传</Button>
        <Tabs tabPosition='left'>
          {picCategoryOptions.map((itemParent) => (
            <Tabs.TabPane tab={itemParent.label} key={itemParent.value}>
              {
                (showLostItemPic[itemParent.showLostItem] || []).map((item, index) => (
                  <Row key={index} align='middle'>
                    <Col span={16}>
                      <img src={API_URL + `/api/uploadAndDownload/showImg?imgUrl=` + item.imgUrl} alt="" style={{ width: '50px' }} />
                      <span className={styles.imgName}>{Const[PrivateData.imgType.get(ownerType)][itemParent.value].children[item.twoType]}</span>
                    </Col>
                    <Col span={8}>
                      {(!isDisabled) && <>
                        <span onClick={() => downloadImg(item.imgUrl, item.twoType)} className={styles.downloadBtn}>下载</span>
                        <span onClick={() => del(item.oneType, index)} className={styles.delBtn}>删除</span>
                      </>}
                    </Col>
                  </Row>
                ))
              }
            </Tabs.TabPane>
          ))}
        </Tabs>
      </div>
    </Modal>
  );
};

export default Form.create()(ShowPic);
